<template>
    <div class="report">
        <div class="table">
            <div class="report-child">
                <el-table :data="table.data" :span-method="objectSpanMethod" style="width: 100%" stripe :header-cell-style="{background:'#EFEFEF',color:'#333333'}" :cell-style="{color:'#000000'}">
                    <el-table-column prop="city" label="站点归类" align="center" width="80"/>
                    <el-table-column prop="district" label="最高气温(站点)" align="center" width="70" />
                    <el-table-column prop="maxTem" label="最小值" align="center" width="70" />
                    <el-table-column prop="minTem" label="最大值" align="center" width="70" />
                    <el-table-column prop="shangxun" label="x月上旬(历史平均最高气温)" width="100"  align="center" v-if="table.shangxun"/>
                    <el-table-column prop="zhongxun" label="x月中旬(历史平均最高气温)" width="100"  align="center" v-if="table.zhongxun"/>
                    <el-table-column prop="xiaxun" label="x月下旬(历史平均最高气温)" width="100"  align="center" v-if="table.xiaxun"/>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script setup>

import dataMethod from '../../utils/rowCol.js';
const table = reactive({
    data:[
        {city:'北海',district:'湄洲岛',maxTem:26,minTem:30,tem1:-9,tem2:-7,tem3:-4,tem4:-1,tem5:0,tem6:4,tem7:10,shangxun:12,zhongxun:20,xiaxun:32},
        {city:'北海',district:'北海',maxTem:26,minTem:30,tem1:1,tem2:4,tem3:7,tem4:8,tem5:9,tem6:4,tem7:10,shangxun:12,zhongxun:20,xiaxun:32},
        {city:'北海',district:'合浦',maxTem:26,minTem:30,tem1:-9,tem2:-7,tem3:-4,tem4:-1,tem5:0,tem6:4,tem7:10,shangxun:12,zhongxun:20,xiaxun:32},
        {city:'南宁',district:'南宁',maxTem:26,minTem:30,tem1:1,tem2:4,tem3:7,tem4:8,tem5:9,tem6:4,tem7:10,shangxun:12,zhongxun:20,xiaxun:32},
        {city:'南宁',district:'武鸣',maxTem:26,minTem:30,tem1:-9,tem2:-7,tem3:-4,tem4:-1,tem5:0,tem6:4,tem7:10,shangxun:12,zhongxun:20,xiaxun:32},
        {city:'南宁',district:'隆安',maxTem:26,minTem:30,tem1:1,tem2:4,tem3:7,tem4:8,tem5:9,tem6:4,tem7:10,shangxun:12,zhongxun:20,xiaxun:32},
        {city:'崇左',district:'崇左',maxTem:26,minTem:30,tem1:1,tem2:4,tem3:7,tem4:8,tem5:9,tem6:4,tem7:10,shangxun:12,zhongxun:20,xiaxun:32},
        {city:'崇左',district:'龙州',maxTem:26,minTem:30,tem1:1,tem2:4,tem3:7,tem4:8,tem5:9,tem6:4,tem7:10,shangxun:12,zhongxun:20,xiaxun:32},
        {city:'北海',district:'湄洲岛',maxTem:26,minTem:30,tem1:-9,tem2:-7,tem3:-4,tem4:-1,tem5:0,tem6:4,tem7:10,shangxun:12,zhongxun:20,xiaxun:32},
        {city:'北海',district:'北海',maxTem:26,minTem:30,tem1:1,tem2:4,tem3:7,tem4:8,tem5:9,tem6:4,tem7:10,shangxun:12,zhongxun:20,xiaxun:32},
        {city:'北海',district:'合浦',maxTem:26,minTem:30,tem1:-9,tem2:-7,tem3:-4,tem4:-1,tem5:0,tem6:4,tem7:10,shangxun:12,zhongxun:20,xiaxun:32},
        {city:'南宁',district:'南宁',maxTem:26,minTem:30,tem1:1,tem2:4,tem3:7,tem4:8,tem5:9,tem6:4,tem7:10,shangxun:12,zhongxun:20,xiaxun:32},
        {city:'南宁',district:'武鸣',maxTem:26,minTem:30,tem1:-9,tem2:-7,tem3:-4,tem4:-1,tem5:0,tem6:4,tem7:10,shangxun:12,zhongxun:20,xiaxun:32},
    ],
})
const spanObj = ref({})
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
//列合并
    let _row = spanObj.value[column.property]?spanObj.value[column.property][rowIndex]:1;
    let _col = _row>0?1:0;
    return {
        rowspan: _row,
        colspan: _col
    }
}
onMounted(() => {
    spanObj.value = dataMethod(table.data, ['city']);;
})
</script>

<style lang="less" scoped>
.report{
    width: 100%;
    background-color: #ffffff;
    padding: 20px;
    .title{
        display: flex;
        justify-content: space-between;
        margin-bottom: 40px;
        .left{
            font-size: 42px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: bold;
            color: #333333;
        }
        ul{
            display: flex;
            margin-top: 17px;
            li{
                width: 100px;
                height: 20px;
                position: relative;
                div:first-child{
                    width: 100%;
                    height: 100%;
                }
                div:last-child{
                    position: absolute;
                    right: 0;
                    bottom: -100%;
                }
            }
        }
    }
    .table{
        display: flex;
        width: 100%;
        height: calc(100% - 95px);
        justify-content: space-between;
    }
}
:deep(.el-table .el-table__cell){
    padding: 0;
}
:deep(.el-table .cell){
    padding: 0;
}
</style>
